<template>
	<view>
		<!-- 当只有一个订单的时候 -->
		<view v-if="itemData.orders.length==1 && itemData.orders[0].goods.length==1 && !itemData.is_other"  @click.stop="checkboxChange(itemData)">
			<view v-for="(its,ids) in itemData.orders" :key="ids">
				<view class="li_top sp" :class="{'checkbox':it.has_storage}" v-for="(it,id) in its.goods" :key="id">
					<view class="top_titles">
						<view class="top_left">
							<text>{{it.goods_name}}</text>
						</view>
						<view class="top_right">
							<!-- <view class="on">规格:{{it.goods_weight}}{{it.goods_unit}}</view>
							<view class="sn">实发:{{it.true_weight}}{{it.goods_unit}}</view> -->
							<view class="on">规格:{{it.goods_weight}}{{it.goods_unit}}/{{it.true_weight}}{{it.goods_unit}}</view>
						</view>
					</view>
					<!-- 分配选择框 -->
					<view class="top_che">
						<view class="car_checkbox">
							<u-checkbox-group :size="20">
								<u-checkbox :checked="it.has_storage" @change="checkboxChange(itemData)" activeColor="#16BB5D" shape="circle"></u-checkbox>
							</u-checkbox-group>
						</view>
					</view>
					<!-- 分配选择框 -->
				</view>
			</view>
		</view>
		<!-- 当只有一个订单的时候 emd-->
		
		<!-- 第三方单 -->
		<view v-else-if="itemData.is_other">
			<view class="li_top sp" :class="{'checkbox':itemData.selectTrue}">
				<view class="top_titles">
					<view class="top_left">
						<text>{{itemData.other.order_goods}}</text>
					</view>
					<view class="top_right">
						<view class="sn other">实发:{{itemData.other.order_number}}{{itemData.other.unit}}</view>
					</view>
				</view>
				<!-- 分配选择框 -->
				<view class="top_che">
					<view class="car_checkbox">
						<u-checkbox-group :size="20">
							<u-checkbox :checked="itemData.selectTrue" @change="checkboxChange(itemData)" activeColor="#16BB5D" shape="circle"></u-checkbox>
						</u-checkbox-group>
					</view>
				</view>
				<!-- 分配选择框 -->
			</view>
		</view>
		<!-- 第三方单 emd-->
		
		<!-- 当多个订单合并时 -->
		<view v-else>
			<view v-for="(its,ids) in itemData.orders" :key="ids">
				<view class="li_top sp duoge" :class="{'checkbox':it.has_storage}" v-for="(it,id) in its.goods" :key="id" @click.stop="checkboxChange(itemData,it)">
					<view class="top_titles">
						<view class="top_left" v-if="itemData.orders.length==1 && itemData.orders[0].goods.length>1">
							<text>{{it.goods_name}}</text>
						</view>
						<view class="top_left" v-else>
							<view><text class="ins">{{its.order_id}}--</text>{{it.goods_name}}</view>
						</view>
						<view class="top_right">
							<view class="on">规格:{{it.goods_weight}}{{it.goods_unit}}/{{it.true_weight}}{{it.goods_unit}}</view>
						</view>
					</view>
					<!-- 分配选择框 -->
					<view class="top_che">
						<view class="car_checkbox">
							<u-checkbox-group :size="20">
								<u-checkbox :checked="it.has_storage" @change="checkboxChange(itemData,it)" activeColor="#16BB5D" shape="circle"></u-checkbox>
							</u-checkbox-group>
						</view>
					</view>
					<!-- 分配选择框 -->
				</view>
			</view>
		</view>
		<!-- 当多个订单合并时 end-->
		
		<!-- 查看订单详情 -->
		<u-popup :show="listTrue" :round="10" mode="bottom" @close="listTrue=false" closeable :zIndex="998">
			<view class="show_content">
				<view class="show_titile">订单列表</view>
				<view v-for="(its,ids) in listData" :key="ids">
					<view class="show_li" v-for="(it,id) in its.goods" :key="id">
						<view class="data_top">
							<view>{{it.goods_name}}</view>
						</view>
						<view class="data_ds">
							<view class="ds_left">
								<view class="on">单价:￥{{it.unit_price}}</view>
								<view class="sn">实发:{{it.true_weight}}{{it.goods_unit}}</view>
							</view>
							<view class="ds_right">
								<view class="on">商品价格:<text>￥{{it.goods_amount}}</text></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 查看订单详情 end-->
	</view>
</template>

<script setup>
	import { ref } from "vue"

	const props = defineProps({
		itemData:Object
	})
	
	const listTrue=ref(false);
	const listData=ref(null);
	
	//点击弹窗
	function listClick(data){
		listTrue.value=true;
		listData.value=data;
	}
	
	const emit = defineEmits(['checkboxClick']);
	
	//点击
	function checkboxChange(item,it=null){
		emit('checkboxClick',item,it);
	}
	
</script>

<style lang="scss" scoped>
.li_top.sp{
	padding-top: 10rpx;
	.top_titles{
		.top_left{
			color: red;
			font-size: 28rpx;
			font-weight: 700;
			flex: auto;
			.ins{
				font-size: 26rpx;
				color: #FF3D5A;
			}
		}
		.top_right{
			font-size: 28rpx;
			.on{
				font-size: 26rpx;
			}
			.sn{
				font-size: 26rpx;
			}
		}
	}
}
.li_top.sp.duoge{
	border-bottom: 2rpx solid #ccc;
	padding: 16rpx 0;
}
.li_top.sp.checkbox{
	.top_titles{
		.top_left{
			color: #16BB5D;

			.ins{
				color: #16BB5D;
			}
		}
		.top_right{
			.on{
				color: #16BB5D;
			}
			.sn{
				color: #16BB5D;
			}
		}

	}
}
.li_top.sp.duoge.checkbox{
	border-bottom: 2rpx solid #16BB5D;
}
.li_top{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	line-height: 40rpx;
	// align-items: center;
	position: relative;
	.top_titles{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		flex: auto;
		.top_left{
			font-size:26rpx;
			color: #666;
			display: flex;
			flex-direction: row;
			align-items: center;
			flex: auto;
			.fz{
				border: 2rpx solid #ccc;
				border-radius: 60rpx;
				padding: 4rpx 20rpx;
				font-size: 24rpx;
				color: #999;
				margin-left: 20rpx;
				line-height: initial;
				height: 40rpx;
				display: flex;
				align-items: center;
				justify-items: center;
				flex: none;
				width: 50rpx;
			}
			.dz{
				flex: auto;
			}
			.wz{
				flex: none;
				width: 110rpx;
				text-decoration: underline;
				color: #FD7722;
				margin-left: 10rpx;
				text-align: center;
			}
		}
		.top_right{
			font-size: 30rpx;
			color: #FD7722;
			display: flex;
			flex: none;
			margin-left: 30rpx;
			.on{
				font-size: 26rpx;
				color: red;
				// width: 120rpx;
				width: auto;
				font-weight: 700;
			}
			.sn{
				color: red;
				font-size: 28rpx;
				font-weight: 700;
				text-align: right;
				// width: 160rpx;
				width: auto;
				margin-left: 20rpx;
			}
			.incons{
				color: #FD7722;
				display: flex;
				align-items: center;
				justify-content: center;
				.iconfont{
					font-size: 28rpx;
					margin-left: 10rpx;
					font-weight: 700;
				}
			}
			.other.sn{
				width: 180rpx;
			}
		}
	}
	.top_che{
		display: flex;
		flex: none;
		align-items: center;
		margin-left: 30rpx;
	}
}

.show_content{
	padding: 30rpx;
	.show_titile{
		text-align: center;
		font-size: 32rpx;
		color: #000;
		font-weight: 700;
		margin-bottom: 30rpx;
	}
	.show_li{
		display: flex;
		flex-direction: column;
		border-bottom: 2rpx solid #ccc;
		padding-bottom: 20rpx;
		.data_top{
			font-size: 30rpx;
			margin-bottom: 10rpx;
			font-weight: 700;
			color: #000;
		}
		.data_ds{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			.ds_left{
				display: flex;
				flex-direction: row;
				.on{
					font-size: 26rpx;
					color: #333;
					font-weight: 700;
				}
				.sn{
					color: #333;
					font-size: 26rpx;
					margin-left: 20rpx;
					font-weight: 700;
				}
			}
			.ds_right{
				display: flex;
				flex-direction: row;
				.on{
					font-size: 26rpx;
					color: #333;
					font-weight: 700;
					text{
						font-size: 28rpx;
						color: red;
					}
				}
			}
		}
	}
}
:deep(.u-transition){
	z-index: 997 !important;
}
</style>
